<template>
  <div class="main">
      <div class="CJ">
        <div class="title">登录</div>
          <el-form :model="param" :rules="rules" ref="login" label-width="0px" class="ms_content">
              <el-form-item prop="username">
                  <el-input v-model="param.username" placeholder="请输入用户名">
                     <el-button slot="prepend" icon="el-icon-user"></el-button>
                  </el-input>
              </el-form-item>
              <el-form-item prop="passwd">
                   <el-input v-model="param.passwd" placeholder="请输入密码" type="passwd">
                      <el-button slot="prepend" icon="el-icon-lock"></el-button>
                   </el-input>
              </el-form-item>
              <div class="my_button">
                  <el-button type="primary" @click="submit()">登录</el-button>
              </div>
          </el-form>
      </div>
  </div>
</template>

<script>
export default {
  name: 'login',
  data () {
    return {
      param: {username: 'admin',
             passwd: '123456'
      },
      rules: { username: [{required: true, message: '请输入用户名',trigger: 'blur'}],
             passwd:[{ required: true, message: '请输入密码',trigger: 'blur'}]
      }
    }
  },
  methods: {
    submit(){
      this.$refs.login.validate(valid => {
        if(valid){
          this.$message.success("登录成功");
          this.$router.push('/homePage');
        }
        else{
          this.$message.error("请输入账号和密码");
          return false;
        }
      });
    }
  }
}
</script>

<style>
.main {
  position: relative;
  width:100%;
  height:100%;
  background-image: url('../assets/login-bg.jpg');
  background-size: 100% ;

}
.CJ{
    position: absolute;
    left: 50%;
    top: 50%;
    width:350px;
    margin: -30px 0 0 -175px;
    background:rgba(255,255,255,0.3);
}
.title{
  text-align: center;
  color: #fff;
  font-size: 20px;
  border-bottom: 1px solid #ddd ;
}
.ms_content{
  padding:30px 30px;
}
.my_button{
  text-align: center;
  width:100%;
}
.Tips{
  text-align: center;
  color:#fff;
  font-size :14px;
}
</style>
